<template>
  <div id="search">
    <template v-if="platform === 1">
      <div class="pc_search_content">
        <div class="content_title" v-if="resData_pc.length > 0">
          当前展示: <span class="totalNum">{{ total }}</span> 个结果
        </div>

        <div class="content_cards">
          <div class="productsContent">
            <div
              class="productItem"
              v-for="item in resData_pc"
              :key="item.id"
              @click="buyProduct(item)"
            >
              <div class="productImages">
                <div class="productImage">
                  <img :src="show_url + item.images[0]" />
                  <img
                    class="nullStock"
                    v-if="item.goods_stock === 0"
                    src="@/assets/images/mobile_black/home/soldout.png"
                  />
                  <div v-else-if="item.isOverTime" class="overTimeMask">
                    已结束
                  </div>
                </div>

                <div class="sellDay" v-if="item.sale_type === 3">
                  时间待定
                </div>
                <div
                  class="sellDay"
                  v-else-if="item.is_buy === 0 && !item.isOverTime && item.countTimeStatus == 1"
                >
                  {{ item.sellTime }}
                </div>
              </div>

              <div class="productDesc">
                <img
                  class="desc_background"
                  src="@/assets/images/pc_black/home/list_background.png"
                />

                <div class="productTitle">
                  {{ item.goods_name }}
                </div>

                <div class="productCenter">
                  <img :src="show_url + item.icon" />
                  <span>{{ item.authorize }}</span>
                </div>

                <div class="buy">
                  <button
                    v-if="item.goods_stock !== 0 && !item.isOverTime"
                    class="buyButton btn_color"
                    :disabled="item.goods_stock === 0 || item.isOverTime"
                    @click.stop="buyProduct(item)"
                  >
                    {{ changeBuy(item) }}
                  </button>
                  <button
                    v-else
                    class="buyButton btn_grey"
                    :disabled="item.goods_stock === 0 || item.isOverTime"
                    @click.stop="buyProduct(item)"
                  >
                    {{ changeBuy(item) }}
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div class="noneTip" v-if="resData_pc.length <= 0">
            <img class="noneTip_img" src="@/assets/images/mobile_black/center/null.png" />
            <div class="noneTip_txt">
              <span>没有找到你搜索的藏品</span>
              <span>换一个词试一试吧</span>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="bottom_part">
        <div class="font_box">
          <span
            >Copyright © 2022 海南原上区块链科技有限公司 All Rights Reserved.
          </span>
          <span>琼ICP备18003326号-3</span>
        </div>
      </div> -->
    </template>

    <template v-else>
      <div class="m_wrapper">
        <!-- 头部搜索 -->
        <div class="search_top">
          <!-- 中间搜索框 -->
          <div class="center_box">
            <!-- 放大镜 -->
            <img class="search" src="@/assets/images/mobile_black/home/search.png" />
            <input
              ref="searchInput"
              class="center_input"
              v-model="searchValue"
              type="text"
              placeholder="搜索数字产品"
              @input="changeInput"
              @keypress.enter="enterSearch($event)"
            />
            <!-- 清空输入框内容按钮 -->
            <img
              class="clearInput"
              src="@/assets/images/mobile_black/login/clear.png"
              @click="clearInput"
            />
          </div>

          <!-- 右侧搜索 -->
          <span class="right_btn" @click.stop="gotoBack">取消</span>
        </div>

        <!-- 搜索输入框空时，显示搜索历史  -->
        <div v-if="searchValue === '' && isShowResData === false" class="search_history_content">
          <!-- 搜索历史 -->
          <div v-if="historyData.length !== 0" class="search_history">
            <div class="history_title">
              <span class="title_font">搜索历史</span>
              <img
                @click.stop="openConfirmDialog"
                class="title_img"
                src="@/assets/images/mobile_black/home/clear_history.png"
              />
            </div>

            <div class="history_content">
              <div
                class="content_item"
                v-for="(item, index) in historyData"
                :key="index"
                @click.stop="gotoItem(item)"
              >
                {{ textSub(item) }}
              </div>
            </div>

            <!-- confirm dialog -->
            <van-dialog
              v-model="isShowClearHistoryDialog"
              show-cancel-button
              cancel-button-text="取消"
              confirm-button-text="确认"
              confirm-button-color="#00ffb0"
              :beforeClose="defaultClose"
              @cancel="closeConfirmDialog"
              @confirm="clearHistory"
            >
              <span>确认删除所有的历史搜索吗？</span>
            </van-dialog>
          </div>
        </div>

        <!-- 搜索输入框不为空时，且未开始搜索时，显示联想提示内容 -->
        <div class="search_tip" v-if="searchValue !== '' && isShowResData === false">
          <ul>
            <li
              v-for="(item, index) in associateFilterData"
              :key="index"
              v-html="mapText(item, searchValue)"
              @click.stop="searchByTip(index, item)"
            ></li>
          </ul>
        </div>

        <!-- 搜索输入框不为空时，且开始搜索时，显示内容 -->
        <div class="result_content_afterClick" v-if="searchValue !== '' && isShowResData === true">
          <!-- <van-pull-refresh
          v-model="refreshing"
          @refresh="onRefresh"
          success-text="刷新成功"
        >
        </van-pull-refresh> -->

          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="-- 没有更多了 --"
            @load="onLoad"
            v-if="total !== 0"
          >
            <!-- 数量 -->
            <div class="result_content_title" v-if="searchValue !== '' && isShowResData === true">
              当前展示: <span class="totalNum">{{ total }}</span> 个结果
            </div>
            <div class="productGroup">
              <div
                class="productItem"
                v-for="item in resData"
                :key="item.id"
                @click.stop="buyProduct(item)"
              >
                <div class="productImages">
                  <img :src="show_url + item.images[0]" />
                  <img
                    class="nullStock"
                    v-if="item.goods_stock === 0"
                    src="@/assets/images/mobile_black/home/soldout.png"
                  />
                  <div v-else-if="item.isOverTime" class="overTimeMask">
                    已结束
                  </div>
                  <div class="sellDay" v-if="item.sale_type === 3">
                    时间待定
                  </div>
                  <div
                    class="sellDay"
                    v-else-if="item.is_buy === 0 && !item.isOverTime && item.countTimeStatus == 1"
                  >
                    {{ item.sellTime }}
                  </div>
                </div>

                <div class="productDesc">
                  <p class="productTitle">{{ item.goods_name }}</p>

                  <div class="buy">
                    <div class="price">
                      <span>¥</span>
                      <span>{{ item.price }}</span>
                    </div>

                    <div class="like">
                      <img src="@/assets/images/mobile_black/center/favorite_cancel.png" />
                      <span>{{ item.likes_num >= 9999 ? "1W" : item.likes_num }}个赞</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>

          <div class="nullBox" v-else>
            <img src="@/assets/images/mobile_black/center/null.png" />
            <p>没有找到你搜索的藏品</p>
            <p>换一个词试一试吧</p>
          </div>
        </div>
      </div>

      <!-- 返回顶部 -->
      <img
        v-if="btnFlag"
        src="@/assets/images/mobile/back_top_arrow.png"
        class="go-top"
        @click="backTop"
      />
    </template>
  </div>
</template>

<script>
import { ElPage } from "@/components";
import { createOrderApi, getDoodsListApi, associateSearchApi } from "@/api";
import { iscode, getWidth, reHeight, isIOS } from "@/utils";
import _ from "lodash";

export default {
  name: "Search",
  components: { ElPage },
  data() {
    return {
      // 搜索的内容
      searchValue: "",
      // 搜索历史的数据
      historyData: [],
      // 搜索结果的数据
      resData: [],
      resData_pc: [],
      // 是否显示清空历史记录弹窗
      isShowClearHistoryDialog: false,
      // 是否显示搜索结果
      isShowResData: false,
      // 回到顶部
      btnFlag: false,
      // 下拉刷新、上拉加载
      loading: true,
      finished: false,
      refreshing: false,
      // 当前第几页
      currentPage: 1,
      // 每页多少条
      pageSize: 8,
      total: 0,
      isFirst: true,
      isMouseOver: false,
      platform: 1, //  "platform":1PC 2手机
      show_url: "",
      // 搜索提示的数据
      associateData: [],
      // 搜索提示过滤数据
      associateFilterData: []
    };
  },
  computed: {
    findDataFilter() {
      return this.findData.filter((item, index) => index < 8);
    }
  },
  mounted() {
    if (getWidth() > 768) {
      this.search("pc");
    }
    window.addEventListener("scroll", this.scrollToTop, true);
    let searchHistory = JSON.parse(localStorage.getItem("searchHistory"));
    if (searchHistory) {
      this.historyData = searchHistory.filter((item, index) => index < 10);
    }
    if (getWidth() <= 768) {
      this.platform = 2;
      // 一进入就获取焦点
      this.$nextTick(() => {
        this.$refs.searchInput.focus();
      });
    } else {
      this.platform = 1;
    }

    reHeight("search", this);
  },

  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  watch: {
    $route(val) {
      this.search("pc");
    },
    searchValue(newValue, oldValue) {
      if (newValue) {
        this.searchValue = newValue.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, "");
      }
    }
  },
  methods: {
    // ------ 异步相关方法 ------
    // 获取搜索的商品列表
    async searching() {
      // 判断是否时下拉刷新，如果是则清空原数据
      if (this.refreshing) {
        this.resData = [];
        this.currentPage = 1;
        this.refreshing = false;
      }

      let res = await getDoodsListApi({
        goods_cate_id: "",
        goods_album_id: "",
        goods_name: this.searchValue,
        page: this.currentPage,
        pagesize: this.pageSize,
        orderby: "likes_num desc"
      });
      if (iscode(res)) {
        if (this.currentPage === 1) {
          this.show_url = res.result.show_url;
          this.total = res.result.count;
        }
        this.resData_pc = res.result.list;
        this.resData_pc.map((item, index) => {
          let date, month, day, time;
          if (item.pre_start_time) {
            date = item.pre_start_time.split(" ")[0].split("-");
            month = date[1] + "月";
            day = date[2] + "日 ";
            time = month + day + item.pre_start_time.split(" ")[1].substr(0, 5) + "开售";
            this.$set(item, "sellTime", time);
            this.overTime(res, item);
            this.countTime(res, this.resData_pc);
          }
        });

        let resData = res.result.list;
        // 每次加载合并新老数据
        this.resData = [...this.resData, ...resData];
        this.resData.map((item, index) => {
          let date, month, day, time;
          if (item.pre_start_time) {
            date = item.pre_start_time.split(" ")[0].split("-");
            month = date[1] + "月";
            day = date[2] + "日 ";
            time = month + day + item.pre_start_time.split(" ")[1].substr(0, 5) + "开售";
            this.$set(item, "sellTime", time);
          }
          this.countTime(res, this.resData);
        });

        // 加载过程中不触发load事件
        this.loading = false;
        // 加载结束
        if (res.result.count === this.resData.length) {
          this.finished = true;
          this.isFirst = false;
          return;
        }
        this.isFirst = false;
      }
    },
    async pc_searching() {
      let res = await getDoodsListApi({
        goods_cate_id: "",
        goods_album_id: "",
        goods_name: this.searchValue,
        page: 1,
        pagesize: 999999,
        orderby: "likes_num desc"
      });
      if (iscode(res)) {
        this.show_url = res.result.show_url;
        this.total = res.result.count;
        this.resData_pc = res.result.list;
        this.resData_pc.map((item, index) => {
          let date, month, day, time;
          if (item.pre_start_time) {
            date = item.pre_start_time.split(" ")[0].split("-");
            month = date[1] + "月";
            day = date[2] + "日";
            time = month + day + item.pre_start_time.split(" ")[1].substr(0, 5) + "开售";
            this.$set(item, "sellTime", time);
            this.countTime(res, this.resData_pc);
            this.overTime(res, item);
          }
        });
      }
    },
    // 创建订单
    async createOrder(payload) {
      // --- 1.已售空的情况(已调整，现在售空的情况按钮直接禁止点击了)
      if (payload.goods_stock === 0) {
        if (!localStorage.getItem("isLogin")) {
          this.$message({
            message: "请先登录！",
            iconClass: "myErrorIcon",
            customClass: "myError"
          });
          return;
        }
        this.$message({
          message: "该商品已售罄",
          iconClass: "myErrorIcon",
          customClass: "myError"
        });
        return;
      }
      let result = await createOrderApi({
        goods_id: payload.id,
        hashcode:
          "0x456543fd67hsd3hhjsdb5456543fd67hsd3hhjsdb5456543fd67hsd3hhjsdb5456543fd67hsd3hhjsdb5",
        platform: this.platform
      });
      // --> 对是否能够进入订单界面进行分情况判断(先得通过登录，再通过身份认证，并且不是售空或预售的情况，才可以正常购买)：
      if (result.code === 0) {
        // --- 2.正常通过的情况
        this.$router.push({
          path: "/mail/confirmProducts",
          query: {
            id: payload.id,
            order_sn: result.result.order.order_sn,
            order_id: result.result.order.id
          }
        });
      } else if (result.code === 200019) {
        // --- 3.未实名认证的情况
        this.$message({
          message: result.message,
          iconClass: "myErrorIcon",
          customClass: "myError"
        });
      } else if (result.code === 400004) {
        // --- 4.未登录的情况
        this.$message({
          message: result.message,
          iconClass: "myErrorIcon",
          customClass: "myError"
        });
      } else if (result.code === 200025) {
        // --- 5.预售的情况
        this.$message({
          message: result.message,
          iconClass: "myErrorIcon",
          customClass: "myError"
        });
        return;
      }
    },
    // 搜索联想
    associateSearch: _.debounce(async function() {
      let res = await associateSearchApi({
        keywords: this.searchValue.trim()
      });
      if (iscode(res)) {
        if (res.result !== null && res.result.list) {
          this.associateData = res.result.list;
          this.associateFilterData = Object.assign([], res.result.list);
          this.associateFilterData.forEach((item, index) => {
            if (item.length > 30) {
              this.associateFilterData.splice(index, 1, item.slice(0, 30) + "...");
            }
          });
        }
      }
    }, 400),

    // ------ 功能性方法 ------
    overTime(result, item) {
      let startDate, endDate;
      if (isIOS()) {
        startDate = new Date(result.result.now_time.replace(/-/g, "/"));
        endDate = new Date(item.pre_end_time.replace(/-/g, "/"));
      } else {
        startDate = new Date(result.result.now_time);
        endDate = new Date(item.pre_end_time);
      }
      let now = startDate.getTime();
      let end = endDate.getTime();
      if (end - now > 0) {
        this.$set(item, "isOverTime", false);
      } else {
        this.$set(item, "isOverTime", true);
      }
      // console.log(item);
    },
    countTime(result, list) {
      list.map((item, index) => {
        if (item.is_buy == 0) {
          let startDate, endDate;
          if (this.isIos == true) {
            startDate = new Date(result.result.now_time.replace(/-/g, "/"));
            endDate = new Date(item.pre_start_time.replace(/-/g, "/"));
          } else {
            startDate = new Date(result.result.now_time);
            endDate = new Date(item.pre_start_time);
          }
          let now = startDate.getTime();
          let end = endDate.getTime();
          let leftTime = end - now;
          if (leftTime * 1 > 0) {
            this.$set(item, "countTimeStatus", 1);
          } else {
            this.$set(item, "countTimeStatus", 0);
          }
        }
      });
    },
    // 上拉加载
    onLoad() {
      if (this.isFirst) {
        return;
      }
      this.currentPage++;
      this.searching();
    },
    // 下拉刷新
    onRefresh() {
      if (this.resData.length === 0) {
        this.refreshing = false;
        this.loading = false;
        this.finished = true;
        return;
      }
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    // 超出省略
    textSub(text) {
      let res = text;
      if (text && text.length > 10) {
        res = text.substring(0, 10) + "...";
      }
      return res;
    },
    // 搜索
    search(payload) {
      if (getWidth() > 768) {
        this.searchValue = this.$route.query.searchValue;
      }

      if (this.searchValue === "" || this.searchValue === null) {
        return;
      }

      this.finished = false;
      this.isFirst = true;

      // 每次重新搜索时都重置数据
      this.currentPage = 1;
      this.resData = [];
      // this.resData_pc = [];

      // 历史记录
      let arr = JSON.parse(localStorage.getItem("searchHistory"));
      let newArr = [];
      if (arr) {
        newArr.push(...new Set([this.searchValue, ...arr]));
      } else {
        newArr = [this.searchValue];
      }
      localStorage.setItem("searchHistory", JSON.stringify(newArr));
      this.historyData = newArr.filter((item, index) => index < 50);
      if (payload && payload === "pc") {
        this.pc_searching();
      } else {
        this.searching();
      }
      this.isShowResData = true;
    },
    // 通过点击tip搜索
    searchByTip(index, item) {
      this.searchValue = this.associateData[index];
      this.search();
    },
    // 按回车搜索
    enterSearch(e) {
      e.srcElement.blur();
      this.search();
    },
    // 清空历史记录
    clearHistory() {
      this.closeConfirmDialog();
      this.$toast("已清空");
      this.historyData = [];
      localStorage.removeItem("searchHistory");
    },
    // 阻止dialog默认的关闭事件
    defaultClose(action, done) {
      done(false);
    },
    // 打开确认清除历史记录弹窗
    openConfirmDialog() {
      this.isShowClearHistoryDialog = true;
    },
    // 关闭确认清除历史记录弹窗
    closeConfirmDialog() {
      this.isShowClearHistoryDialog = false;
    },
    // 清空输入框
    clearInput() {
      this.searchValue = "";
      this.isShowResData = false;
      this.currentPage = 1;
      this.resData = [];
    },
    // 打开确认清空搜索历史弹窗
    openClearHistoryDialog() {
      this.isShowClearHistoryDialog = true;
    },
    // 搜索关键字高亮(text是原数据，keyword是搜索的关键字)
    mapText(text, keyword) {
      // const reg = new RegExp(keyword, "gi");
      // let start = 0;
      // let end = 0;
      // let newStr = "";
      // let arr;
      // while ((arr = reg.exec(text)) !== null) {
      //   end = arr.index;
      //   newStr = newStr + text.slice(start, end);
      //   start = end;
      //   end = reg.lastIndex;
      //   newStr =
      //     newStr +
      //     `<span style="color: #00FFB0">${text.slice(start, end)}</span>`;
      //   start = end;
      // }
      // newStr = newStr + text.slice(end);
      // return newStr;

      var reg = /<script[^>]*>(.|\n)*<\/script>/gi; //去掉script标签
      text = text.replace(reg, "");
      var num = -1;
      var kwReg = new RegExp(keyword, "gi"); //匹配传入的搜索值不区分大小写 i表示不区分大小写，g表示全局搜索
      var htmlReg = new RegExp("<.*?>", "ig"); //匹配html元素
      var aHtml = text.match(htmlReg); //存放html元素的数组
      var arr = text.match(kwReg);
      var a = -1;
      text = text.replace(htmlReg, "{~}"); //替换html标签
      text = text.replace(kwReg, function() {
        a++;
        return "<span style='color: #00FFB0'>" + arr[a] + "</span>";
      }); //替换key
      text = text.replace(/{~}/g, function() {
        //恢复html标签
        num++;
        return aHtml[num];
      });
      return text;
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 60) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
    // 搜索内容发生变化
    changeInput() {
      // debounce(this.associateSearch(), 1000);
      this.associateSearch();

      this.isShowResData = false;
      this.currentPage = 1;
    },
    // 切换页码
    changePage(pageNum) {
      this.resData = [];
      this.currentPage = pageNum;
      this.searching();
    },
    // 跳转到对应商品的界面
    buyProduct({ id }) {
      this.$router.push({
        path: "/mail/productDetail",
        query: {
          id: id
        }
      });

      if (getWidth() <= 768) {
        localStorage.setItem("shopPath", "/");
      }
    },
    // 点击购买直接跳转到确认订单界面
    buyProductDeep(payload) {
      this.createOrder(payload);
      if (getWidth() <= 768) {
        localStorage.setItem("shopPath", "/");
      }
    },
    changeBuy(val) {
      // 售罄(没库存)
      if (val.goods_stock <= 0) {
        return "已售罄";
      } else {
        // 有库存
        if (val.isOverTime) {
          return "已结束";
        } else {
          // 正常或者预售(没有超时)
          return "立即查看";
        }
      }
    },

    // ------ 跳转相关方法 ------
    // 跳转到搜索界面
    gotoBack() {
      this.$router.go(-1);
    },
    // 跳转到对应的商品列表界面
    gotoItem(item) {
      this.searchValue = item;
      this.search();
    },
    // 跳转到对应的商品详情界面
    gotoDetail(goods_id) {
      this.$router.push({
        path: "/productDetail",
        query: {
          goods_id
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
#search {
  position: relative;
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: 0;
  width: 100%;
  height: 100%;
  // min-height: 1232px;
  overflow: auto;

  // - 回到顶部
  .go-top {
    position: fixed;
    // bottom: 69px;
    bottom: 10vh;
    right: 24px;
    width: 62px;
    height: 62px;
    background: rgba(0, 0, 0, 0.47);
    border-radius: 50%;
    z-index: 9999;
  }

  // pc
  .pc_search_content {
    position: relative;
    width: 1250px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 180px;
    transform: translateX(25px);

    .content_title {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 14px;

      .totalNum {
        color: #00ffb0;
      }
    }

    .content_cards {
      padding-top: 20px;

      .productsContent {
        display: flex;
        flex-wrap: wrap;

        .productItem {
          width: 276px;
          margin-right: 32px;
          margin-bottom: 32px;

          .productImages {
            position: relative;

            .productImage {
              height: 276px;
              display: flex;
              align-items: center;
              background-color: #000000;

              img {
                width: 276px;
                height: auto;
                max-height: 276px;
                cursor: pointer;
              }

              .nullStock {
                position: absolute;
                left: 0;
                top: 0;
                background: #000000;
                opacity: 0.6;
              }
              .overTimeMask {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                background: #000000;
                opacity: 0.6;
                font-size: 36px;
                font-weight: 700;
                color: #999999;
                font-family: "Lantinghei SC";
              }
            }

            .cownTime {
              position: absolute;
              top: 10px;
              left: 10px;
              display: flex;
              align-items: center;

              .timeBox {
                width: 33px;
                height: 33px;
                background: #ffffff;
                border-radius: 5px;
                display: block;
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                text-align: center;
              }

              .colon {
                margin: 0 5px;
              }
            }

            .sellDay {
              background: url("../../assets/images/pc_black/home/sell.png");
              background-size: 100% 100%;
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              line-height: 16px;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              bottom: 0;
              left: 0;
              padding: 6px 19px 6px 10px;
              min-width: 154px;
            }
          }

          .productDesc {
            position: relative;
            overflow: hidden;
            background: #2b2c2d;
            padding: 0 15px;
            z-index: 0;

            .productTitle {
              display: flex;
              width: 100%;
              height: 52px;
              font-size: 20px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              line-height: 26px;
              display: -webkit-box;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
              word-break: break-all;
              margin-top: 20px;
              z-index: 2;
            }

            .productCenter {
              display: flex;
              align-items: center;
              margin-top: 15px;
              z-index: 2;

              img {
                width: 23px;
                height: 23px;
              }

              span {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                // line-height: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-left: 10px;
              }
            }

            .buy {
              margin-top: 20px;
              margin-bottom: 25px;
              z-index: 2;

              button {
                width: 100%;
                height: 36px;
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #1e2020;
                line-height: 14px;
                border: none;
                background: none;
                background-size: cover;
                background-position: center center;
                cursor: pointer;
              }

              .btn_color {
                background-image: url("../../assets/images/pc_black/home/btn_color.png");
              }

              .btn_grey {
                background-image: url("../../assets/images/pc_black/home/btn_grey.png");
              }
            }

            .desc_background {
              position: absolute;
              top: 0;
              right: 0;
              width: 126px;
              height: 191px;
              z-index: -1;
            }
          }
        }
      }

      .noneTip {
        text-align: center;
        margin-top: 30px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        opacity: 0.6;
      }

      .noneTip_txt {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 25px;
        text-align: center;

        span:nth-child(1) {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 14px;
        }

        span:nth-child(2) {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 12px;
          margin-top: 10px;
        }
      }

      .noneTip_img {
        width: 260px;
      }
    }
  }

  // >> 底部部分
  .bottom_part {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 122px;
    background: #171818;
    box-shadow: 0px -1px 0px 0px #2e2f2f;

    .font_box {
      display: flex;
      flex-direction: column;

      span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 14px;
        text-align: center;
      }

      span:nth-child(2) {
        margin-top: 15px;
      }
    }
  }

  /deep/.van-pull-refresh {
    height: 100%;

    .van-list {
      height: 80%;
    }
  }

  /deep/.van-list__finished-text,
  /deep/.van-loading__text {
    font-size: 25px !important;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #808080;
    margin: 30px 0;
  }
}

@media screen and (max-width: 768px) {
  #search {
    overflow: scroll;

    .m_wrapper {
      width: 100%;
      padding-top: 30px;
    }

    .search_top {
      display: flex;
      align-items: center;
      width: 100%;
      height: 64px;
      background: none;
      padding-left: 30px;

      // 左箭头
      .left_arrow {
        width: 22px;
        height: 22px;
        margin-left: 30px;
        border-top: 2px solid #000000;
        border-right: 2px solid #000000;
        transform: rotate(-135deg);
      }

      .center_box {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        background: #343636;
        border-radius: 32px;

        .search {
          position: absolute;
          left: 30px;
          width: 28px;
          height: 28px;
          z-index: 999;
        }

        // 中间标题
        .center_input {
          width: 100%;
          height: 100%;
          border-radius: 32px;
          border: none;
          background: none;
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 28px;
          padding-left: 78px;
          padding-right: 70px;
          margin: 0;
        }

        // 清空按钮
        .clearInput {
          position: absolute;
          right: 30px;
          width: 28px;
          height: 28px;
        }
      }

      ::-webkit-input-placeholder {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666 !important;
        line-height: 28px;
      }

      // 右侧取消按钮
      .right_btn {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 28px;
        padding: 0;
        margin: 0 40px;
        word-break: keep-all;
      }
    }

    // -历史记录
    .search_history_content {
      margin-top: 40px;
      width: 100%;

      // 搜索历史
      .search_history {
        width: 100%;
        height: auto;

        .history_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 24px;
          padding: 0 40px 0 30px;

          .title_font {
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
          }

          .title_img {
            width: 24px;
            height: 24px;
          }
        }

        .history_content {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 235px;
          overflow: hidden;
          padding: 30px 30px 0 30px;

          .content_item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 52px;
            background: #343636;
            border-radius: 39px;
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
            padding: 0 20px;
            margin: 0 20px 20px 0;
          }
        }

        // 清空历史记录的弹窗
        // >> 认证弹窗
        /deep/.van-dialog {
          width: 490px;
          height: 300px;
          background: none;
        }

        /deep/.van-dialog__content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          background: #1e2020;
          height: 220px;
          text-align: center;
          padding: 0 30px;

          span {
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            color: rgba(255, 255, 255);
          }
        }

        /deep/.van-dialog__footer {
          background: #1e2020;
          font-size: 30px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;

          button {
            background: #1e2020;
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            height: 80px;
          }

          button:nth-child(1) {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }

    // -搜索提示
    .search_tip {
      width: 100%;
      padding-left: 30px;
      padding-top: 32px;

      ul,
      li {
        width: 100%;
      }

      li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100px;
        box-shadow: 0px 2px 0px 0px #333333;
        font-size: 30px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 30px;
        margin-bottom: 2px;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    // -搜索结果
    .result_content_afterClick {
      width: 100%;
      height: 100%;
      padding: 0 30px;
      padding-top: 40px;

      .result_content_title {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 24px;

        .totalNum {
          color: #00ffb0;
        }
      }

      .productGroup {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 40px;

        .productItem {
          width: 44.2667vw;
          background: #2b2c2d;
          box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
          border-radius: 12px 12px 0px 0px;
          margin-bottom: 26px;

          .productImages {
            position: relative;
            height: 42.6667vw;
            display: flex;
            align-items: center;
            background: #000;
            border-radius: 12px 12px 0px 0px;

            img {
              width: 100%;
              max-height: 42.6667vw;
              height: auto;
              border-radius: 12px 12px 0px 0px;
            }

            .nullStock {
              height: 320px;
              position: absolute;
              left: 0;
              top: 0;
              background: #000000;
              opacity: 0.6;
            }

            .overTimeMask {
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              left: 0;
              // right: 0;
              top: 0;
              // bottom: 0;
              width: 100%;
              height: 100%;
              background: #000000;
              opacity: 0.6;
              font-size: 42px;
              font-weight: 900;
              color: #999999;
              font-family: "Lantinghei SC";
            }

            .sellDay {
              background: url("../../assets/images/mobile/sellBtnBg.png");
              background-size: 100% 100%;
              font-size: 20px;
              font-weight: 500;
              color: #000000;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              bottom: 0;
              left: 0;
              padding: 0.8vw 2.5333vw 0.2667vw 1.3333vw;
              z-index: 999;
              min-width: 32vw;
            }
          }

          .productDesc {
            width: 100%;
            // height: 168px;

            .productTitle {
              width: 38.9333vw;
              height: 72px;
              font-size: 28px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 36px;
              padding: 0;
              margin: 16px 20px 24px 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              word-break: break-all;
            }

            .buy {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 20px;
              padding-bottom: 24px;

              .price {
                span {
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #00ffb0;
                  line-height: 28px;
                }

                span:nth-child(1) {
                  font-size: 20px;
                }

                span:nth-child(2) {
                  font-size: 24px;
                  margin-left: 3px;
                }
              }

              .like {
                img {
                  width: 20px;
                  height: 18px;
                }

                span {
                  font-size: 20px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #999999;
                  line-height: 20px;
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }

      .nullBox {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 430px;
          height: 400px;
          margin-top: 136px;
          margin-bottom: 50px;
        }

        p {
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          text-align: center;
        }

        p:nth-child(1) {
          font-size: 28px;
          line-height: 28px;
        }

        p:nth-child(2) {
          font-size: 24px;
          line-height: 24px;
        }
      }
    }
  }
}
</style>
